<template>
    <div class="login-container">
        <div class="login-box">
            <div class="login-header">
                <img src="../assets/logo.png" alt="DiDi Logo" class="logo" />
                <h2>滴滴打车后台管理系统</h2>
            </div>

            <el-form class="login-form" :model="form" :rules="rules" ref="loginForm">
                <el-form-item prop="useracc">
                    <el-input v-model="form.useracc" placeholder="请输入账号">
                        <template #prefix>
                            <el-icon>
                                <User />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item prop="password">
                    <el-input v-model="form.password" type="password" placeholder="请输入密码" show-password>
                        <template #prefix>
                            <el-icon>
                                <Lock />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item prop="captcha">
                    <div class="verify-code-container">
                        <el-input v-model="form.captcha" placeholder="请输入验证码" class="verify-code-input">
                            <template #prefix>
                                <el-icon>
                                    <Key />
                                </el-icon>
                            </template>
                        </el-input>
                        <div class="verify-code-img" @click="refreshCaptcha">
                            <img :src="captchaUrl" alt="验证码" />
                        </div>
                    </div>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" class="login-btn" @click="handleLogin">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { v4 as uuidv4 } from 'uuid'; // 需要安装 uuid: npm install uuid
import request from '@/utils/request'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { User, Lock, Key } from '@element-plus/icons-vue'

const router = useRouter()

//表单
const form = ref({
    useracc: '',
    password: '',
    captcha: '',
})

//表单规则
const rules = {
    useracc: [{ required: true, message: '请输入账号', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
}

const loginForm = ref()
const key = ref(uuidv4())

//获取验证码
const captchaUrl = ref('')

function getCaptchaUrl() {
    request.get('/user/getcode', {
        key: key.value
    }).then((res) => {
        captchaUrl.value = `data:image/png;base64,${res.data.code}`
    }).catch((err) => {
        console.error('验证码获取失败：', err)
    })
}

function refreshCaptcha() {
    key.value = uuidv4()
    getCaptchaUrl()
}

function timerefreshCaptcha() {
    getCaptchaUrl() // 立即加载一次
    setInterval(getCaptchaUrl, 1000 * 60) // 每分钟更新一次验证码
}

// 页面初始获取验证码
timerefreshCaptcha()

//登录
function handleLogin() {
    loginForm.value.validate((valid) => {
        if (valid) {
            // console.log(form.value);
            request.post(`/user/login?captcha=${form.value.captcha}&key=${key.value}`, {
                username: form.value.useracc,
                password: form.value.password
            }).then((res) => {
                // console.log(res)
                if (res.code != 200) {
                    ElMessage.error(res.message);
                    getCaptchaUrl();
                } else {
                    sessionStorage.setItem('token', res.data.map.token);
                    sessionStorage.setItem('user', JSON.stringify(res.data.map.user));
                    ElMessage.success("登录成功！");
                    router.push('/home')
                }
            }).catch((err) => {
                console.log(err);
            })
        } else {
            ElMessage.error('请填写完整信息');
        }
    })
}
</script>

<style>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f5f7fa;
    background-image: linear-gradient(120deg, #f0f2f5, #e6f7ff);
}

.login-box {
    width: 400px;
    padding: 30px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.logo {
    width: 120px;
    margin-bottom: 15px;
}

.login-header h2 {
    margin: 0;
    font-weight: 500;
    color: #333;
    font-size: 24px;
}

.login-form {
    margin-top: 20px;
}

.login-btn {
    width: 100%;
    border-radius: 4px;
    margin-top: 10px;
    background-color: #ff8730;
    border-color: #ff7417;
}

.login-btn:hover,
.login-btn:focus {
    background-color: #ff7417;
    border-color: #ff6600;
}

.forget-pwd {
    float: right;
    color: #ff7417;
    text-decoration: none;
}

.forget-pwd:hover {
    color: #ff6600;
    text-decoration: underline;
}

.verify-code-container {
    display: flex;
    align-items: center;
}

.verify-code-input {
    flex: 1;
}

.verify-code-img {
    margin-left: 10px;
    cursor: pointer;
    height: 40px;
}

.verify-code-img img {
    height: 100%;
    border-radius: 4px;
}

.login-box{
    background-color: #F7F4F3;
}
</style>
